<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	template="/common/template.xhtml">
	<ui:define name="content">

		<f:view>
			<f:loadBundle var="text" basename="#{userForm.bundleName}" />
			<h:head>
				<title>#{text['userProfile.title']}</title>
				<meta name="menu" content="UserMenu" />
				<meta name="heading" content="#{text['userProfile.heading']}" />
			</h:head>

			<c:set var="delObject" value="#{text['userList.user']}" />
			<script type="text/javascript">var msgDelConfirm = "<h:outputFormat value="#{text['delete.confirm']}"><f:param value="#{delObject}" /></h:outputFormat>";</script>

			<div class="span2"></div>
			<div class="span7">
				<div class="breadcrumb" style="text-align: center;">
					<h2>#{text['userProfile.heading']}</h2>
					<c:choose>
						<c:when test="${param.from == 'list' or empty userForm.user.id}">
							<h:outputText value="#{text['userProfile.admin.message']}" />
						</c:when>
						<c:otherwise>
							<h:outputText value="#{text['userProfile.message']}" />
						</c:otherwise>
					</c:choose>
				</div>

				<h:form id="userForm" styleClass="form-horizontal"
					autocomplete="off">
					<h:inputHidden value="#{userForm.user.id}" id="id" />
					<h:inputHidden value="#{userForm.user.version}" id="version" />

					<h:inputHidden value="#{userForm.user.password}"
						id="originalPassword" />
					<input type="hidden" name="from" value="#{userForm.from}" />

					<c:if test="${userForm.rememberMe}">
						<h:inputHidden value="#{userForm.user.password}" id="password" />
						<h:inputHidden value="#{userForm.user.confirmPassword}"
							id="confirmPassword" />
					</c:if>

					<c:if test="${empty userForm.user.version}">
						<input type="hidden" name="encryptPass" value="true" />
					</c:if>

					<c:set var="addText" value="#{text['button.add']}" />

					<div class="control-group">
						<h:outputLabel styleClass="control-label" for="username"
							value="#{text['user.username']}" />
						<div class="controls">
							<h:inputText value="#{userForm.user.username}" id="username"
								required="true" />
							<p:message for="username" />
						</div>
					</div>

					<c:if test="#{userForm.user.id == null }">
						<div class="control-group">
							<h:outputLabel styleClass="control-label" for="password"
								value="#{text['user.password']}" />
							<div class="controls">
								<h:inputSecret value="#{userForm.user.password}" id="password"
									redisplay="true" required="true" />
								<p:message for="password" />
							</div>
						</div>
						<div class="control-group">
							<h:outputLabel styleClass="control-label" for="confirmPassword"
								value="#{text['user.confirmPassword']}" />
							<div class="controls">
								<h:inputSecret value="#{userForm.user.confirmPassword}"
									id="confirmPassword" redisplay="true" required="true">
									<!--p:validateEqual for="password"/-->
								</h:inputSecret>
								<p:message for="confirmPassword" />
							</div>
						</div>

						<div class="control-group">
							<h:outputLabel styleClass="control-label" for="passwordHint"
								value="#{text['user.passwordHint']}" />
							<div class="controls">
								<h:inputText value="#{userForm.user.passwordHint}"
									id="passwordHint" required="true" />
								<p:message for="passwordHint" />
							</div>
						</div>
					</c:if>



					<div class="control-group">
						<h:outputLabel styleClass="control-label" for="firstName"
							value="#{text['user.firstName']}" />
						<div class="controls">
							<h:inputText id="firstName" value="#{userForm.user.firstName}"
								maxlength="50" required="true" />
							<p:message for="firstName" />
						</div>
					</div>

					<div class="control-group">
						<h:outputLabel styleClass="control-label" for="lastName"
							value="#{text['user.lastName']}" />
						<div class="controls">
							<h:inputText value="#{userForm.user.lastName}" id="lastName"
								maxlength="50" required="true" />
							<p:message for="lastName" />
						</div>
					</div>

					<div class="control-group">
						<h:outputLabel styleClass="control-label" for="email"
							value="#{text['user.email']}" />
						<div class="controls">
							<h:inputText value="#{userForm.user.email}" id="email"
								required="true">
								<!-- Ref.: http://stackoverflow.com/questions/7875108/email-validation-using-regular-expression-in-jsf-2-primefaces -->
								<f:validateRegex
									pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
								<!--f:validator validatorId="org.apache.myfaces.validator.Email"/-->
							</h:inputText>
							<p:message for="email" />
						</div>
					</div>

					<div class="control-group">
						<h:outputLabel styleClass="control-label" for="phoneNumber"
							value="#{text['user.phoneNumber']}" />
						<div class="controls">
							<h:inputText value="#{userForm.user.phoneNumber}"
								id="phoneNumber" styleClass="text medium">
								<f:validateRegex
									pattern="^\(?(\d{3})\)?[-| ]?(\d{3})[-| ]?(\d{4})$" />
							</h:inputText>
							<p:message for="phoneNumber" />
						</div>
					</div>

					<fieldset>
						<legend class="accordion-heading">
							<a data-toggle="collapse" href="#collapse-address"><h:outputText
									value="#{text['user.address.address']}" /> </a>
						</legend>
						<div id="collapse-address" class="accordion-body collapse">
							<div class="control-group">
								<h:outputLabel styleClass="control-label" for="address"
									value="#{text['user.address.address']}" />
								<div class="controls">
									<h:inputText value="#{userForm.user.address.address}"
										id="address" />
									<p:message for="address" />
								</div>
							</div>
							<div class="control-group">
								<h:outputLabel styleClass="control-label" for="city"
									value="#{text['user.address.city']}" />
								<div class="controls">
									<h:inputText value="#{userForm.user.address.city}" id="city" />
									<p:message for="city" />
								</div>
							</div>
							<div class="control-group">
								<h:outputLabel styleClass="control-label" for="postalCode"
									value="#{text['user.address.postalCode']}" />
								<div class="controls">
									<h:inputText value="#{userForm.user.address.postalCode}"
										id="postalCode">
										<f:validateRegex pattern="^\d{5}\d*$" />
									</h:inputText>
									<p:message for="postalCode" />
								</div>
							</div>
						</div>
					</fieldset>

					<c:choose>
						<c:when
							test="${param.from == 'list' or param['editUser:add'] == addText}">
							<h:panelGroup>
								<fieldset>
									<legend>
										<h:outputText value="#{text['userProfile.accountSettings']}" />
									</legend>
									<br />
									<h:outputLabel styleClass="checkbox" for="enabled"
										value="#{text['user.enabled']}">
										<p:selectBooleanCheckbox value="#{userForm.user.enabled}"
											id="enabled" styleClass="checkbox" />
									</h:outputLabel>
									<br />
								</fieldset>
							</h:panelGroup>
							<h:panelGroup>
								<fieldset>
									<legend>#{text['userProfile.assignRoles']}</legend>
									<br />
									<p:selectManyCheckbox value="#{userForm.userRoles}"
										id="userRoles">
										<f:selectItems value="#{userForm.availableRoles}" />
									</p:selectManyCheckbox>
								</fieldset>
							</h:panelGroup>
						</c:when>
						<c:otherwise>
							<h:panelGroup>
								<strong>#{text['user.roles']}:</strong>
								<c:if test="${not empty param['userForm:userRoles']}">
                    ${param['userForm:userRoles']}
                    <input type="hidden" name="userForm:userRoles"
										value="${param['userForm:userRoles']}" />
								</c:if>
								<c:forEach var="role" items="#{userForm.userRoles}"
									varStatus="status">
                   ${role}<c:if test="${!status.last}">,</c:if>
									<input type="hidden" name="userForm:userRoles" value="${role}" />
								</c:forEach>
								<h:inputHidden value="#{userForm.user.enabled}" />
								<h:inputHidden value="#{userForm.user.accountExpired}" />
								<h:inputHidden value="#{userForm.user.accountLocked}" />
								<h:inputHidden value="#{userForm.user.credentialsExpired}" />
							</h:panelGroup>
						</c:otherwise>
					</c:choose>
					<div class="form-actions">
						<h:commandButton value="#{text['button.save']}"
							action="#{userForm.save}" styleClass="btn btn-primary" />

						<!-- Todo: hide this button when the user's id is not assigned. Wrapping it with <c:if test="${not empty userForm.user.id}"> or
                 rendered="${not empty userForm.user.id}" doesn't work.  -->
						<h:commandButton value="#{text['button.delete']}"
							action="#{userForm.delete}" styleClass="btn"
							onclick="return confirmMessage(msgDelConfirm)" />

						<h:commandButton value="#{text['button.cancel']}"
							action="#{userForm.cancel}" immediate="true" styleClass="btn" />
					</div>
				</h:form>
			</div>

		</f:view>
	</ui:define>
</ui:composition>
